<template>
  <div class="chat-container" :class="{ 'full-chat': isFullChat }">
    <div class="chat-content">
      <div v-if="!isFullChat">
        <div class="greeting">
          <div class="ai-avatar"></div>
          <p>Hi, 你好丫! 我是您的专属AI投放伙伴</p>
        </div>

        <div class="input-area">
          <input
            v-model="userInput"
            @keyup.enter="sendMessage"
            placeholder="请告诉我您想协助的事情"
            :disabled="isFullChat"
            class="ai-search-input"
          />
          <button @click="toggleFullChat" class="send-button">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <line x1="22" y1="2" x2="11" y2="13"></line>
              <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
            </svg>
          </button>
        </div>

        <div class="suggestions">
          <p>您可以尝试问我以下问题</p>
          <div class="suggestion-buttons">
            <button
              v-for="(suggestion, index) in suggestions"
              :key="index"
              @click="selectSuggestion(suggestion)"
            >
              {{ suggestion.text }}
              <span class="suggestion-category">{{ suggestion.category }}</span>
            </button>
          </div>
        </div>
      </div>
      <!-- <div v-else class="chat-messages">
        <div
          v-for="(message, index) in chatMessages"
          :key="index"
          :class="['message', message.sender]"
        >
          {{ message.text }}
        </div>
      </div> -->
      <div v-else class="chat-messages">
        <!-- <div class="chat-header">
          <h2>职友AI <span class="dropdown-icon">▼</span></h2>
        </div> -->
        <div class="message-container" ref="messageContainer">
          <div
            v-for="(message, index) in chatMessages"
            :key="index"
            :class="['message', message.sender]"
          >
            <div class="avatar" :class="message.sender"></div>
            <div class="message-content">
              <p>{{ message.text }}</p>
              <div v-if="message.sender === 'ai'" class="message-actions">
                <button class="action-button">复制</button>
                <button class="action-button">分享</button>
              </div>
            </div>
          </div>
        </div>
        <div class="input-area full-chat-input">
          <input
            v-model="userInput"
            @keyup.enter="sendMessage"
            placeholder="随时发送你想要了解的各种岗位"
            class="ai-search-input"
          />
          <div class="input-actions">
            <button class="action-icon">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                <circle cx="8.5" cy="8.5" r="1.5"></circle>
                <polyline points="21 15 16 10 5 21"></polyline>
              </svg>
            </button>
            <button class="action-icon">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                <polyline points="17 8 12 3 7 8"></polyline>
                <line x1="12" y1="3" x2="12" y2="15"></line>
              </svg>
            </button>
            <button class="action-icon">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
                <path
                  d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"
                ></path>
              </svg>
            </button>
            <button @click="sendMessage" class="send-button">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <line x1="22" y1="2" x2="11" y2="13"></line>
                <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { nextTick } from 'vue'

const isFullChat = ref(false)
const userInput = ref('')

//ai聊天
const chatMessages = ref([
  {
    sender: 'ai',
    text: 'Hi, 很高兴遇见你! 你可以随时把网址🔗或者文件📄发给我，我来帮你看看'
  },
  { sender: 'user', text: 'no port specified: ./tcp<empty>.' },
  { sender: 'ai', text: '抱歉，刚刚  没反应过来，你可以再说一次嘛？' },
  { sender: 'user', text: '而是在手和广大热心用户' },
  {
    sender: 'ai',
    text: '看起来你可能在讨论编程或网络相关的问题。"no port specified"这个错误通常出现在尝试建立网络连接时，没有指定端口号。例如，在TCP连接中，你需要指定一个端口号来告诉系统你想要连接到服务器的哪个服务。'
  }
])

const suggestions = [
  { text: '帮我创建一个营销方案', category: '广告策略' },
  { text: '订阅用户想要，上周投放效果如何？', category: '广告数据' },
  { text: '我有哪些营销方案存在优化空间？', category: '优化建议' },
  { text: '怎么提高广告触达', category: '用户触达' }
]

const toggleFullChat = () => {
  isFullChat.value = !isFullChat.value
  if (isFullChat.value && userInput.value) {
    sendMessage()
  }
}

const sendMessage = () => {
  if (userInput.value.trim()) {
    chatMessages.value.push({ sender: 'user', text: userInput.value })
    /// 确保DOM更新后滚动到底部
    nextTick(scrollToBottom)
    // Here you would typically send the message to your AI backend
    // and receive a response. For this example, we'll just echo the message.
    setTimeout(() => {
      chatMessages.value.push({
        sender: 'ai',
        text: `You said: ${userInput.value}`
      })
      nextTick(scrollToBottom)
    }, 1000)
    userInput.value = ''
  }
}

const selectSuggestion = (suggestion) => {
  userInput.value = suggestion.text
}

//当你添加新消息到聊天容器时，调用scrollToBottom函数
const messageContainer = ref(null)
const scrollToBottom = () => {
  if (messageContainer.value) {
    messageContainer.value.scrollTop = messageContainer.value.scrollHeight
  }
}
</script>

<style scoped>
.chat-container {
  font-family: Arial, sans-serif;
  max-width: 1200px;
  /* max-height: 600px; */
  margin: auto;
  padding: 20px;
  background: linear-gradient(to bottom, #d3e8fe 0%, #f8f0f0 100%);
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  margin-top: 2rem;
  margin-bottom: 4rem;
}

.full-chat {
  position: fixed;
  top: 1.5rem;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  border-radius: 0;
  z-index: 100;
  padding: 0;
}

.chat-content {
  display: flex;
  margin: 2rem;

  flex-direction: column;
  height: 100%;
}

.greeting {
  display: flex;
  margin: auto;
  max-width: 600px;
  align-items: center;
  margin-bottom: 20px;
  text-align: center;
  font-size: 30px;
  font-weight: 700;
}

.ai-avatar {
  width: 40px;
  height: 40px;
  background-color: #4a90e2;
  border-radius: 50%;
  margin-right: 10px;
}

.input-area {
  display: flex;
  margin: auto;
  width: 600px;
  height: 3rem;
  border: #4a90e2 solid 2px;
  border-radius: 20px;
  margin-bottom: 20px;
  background: #fff;
}
@media (max-width: 768px) {
  .input-area {
    display: flex;
    margin: auto;
    width: 600px;
    height: 3rem;
    border: #4a90e2 solid 2px;
    border-radius: 20px;
    margin-bottom: 20px;
    background: #fff;
  }
}
input {
  flex-grow: 1;
  padding: 10px;
  border: none;
  border-radius: 20px;
  font-size: 16px;
}
.ai-search-input:focus {
  outline: none;
  border-color: #409eff; /* Keep the same border color when focused */
}
.send-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 20px;
}

.send-button svg {
  width: 24px;
  height: 24px;
  color: #4a90e2;
}
.suggestions {
  /* background: #000; */
  width: 100%;
  max-width: 800px;
  /* display: flex; */
  margin: auto;
  height: 100%;
}
.suggestions p {
  margin-bottom: 30px;
  text-align: center;
  color: #666;
}

.suggestion-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.suggestion-buttons button {
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  padding: 10px;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.3s ease;
  height: 125px;
}

.suggestion-buttons button:hover {
  background-color: #f5f5f5;
}

.suggestion-category {
  display: block;
  font-size: 12px;
  color: #999;
  margin-top: 5px;
}

.chat-messages {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 800px;
  margin: auto;
  background: #fff;
  border-radius: 10px;
}

/* .chat-header {
  padding: 0;
  border-bottom: 1px solid #d31f1f;
  height: 3rem;

}

.chat-header h2 {
  font-size: 18px;
  font-weight: normal;
  color: #333;
}

.dropdown-icon {
  font-size: 12px;
  color: #999;
} */

.message-container {
  flex-grow: 1;
  overflow-y: auto;
  padding: 0 20px;
  margin-bottom: 100px;
  /* height: 100vh; */
}

.message {
  display: flex;
  margin-bottom: 20px;
}

.message.user {
  flex-direction: row-reverse;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin: 0 10px;
}

.avatar.ai {
  background-color: #7c3aed;
}

.avatar.user {
  background-color: #f0f0f0;
}

.message-content {
  max-width: 70%;
  padding: 10px 15px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.2;
}

.message.ai .message-content {
  background-color: #f3f4f6;
  color: #333;
}

.message.user .message-content {
  background-color: #7c3aed;
  color: rgb(253, 252, 252);
}

.message-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 5px;
}

.action-button {
  background: none;
  border: none;
  color: #999;
  font-size: 12px;
  cursor: pointer;
  margin-left: 10px;
}

.full-chat-input {
  /* border: 1px solid #e92020; */
  /* padding: 10px 20px; */
  /* border: #333 solid; */
  position: relative;
  bottom: 90px;
}

.input-actions {
  display: flex;
  align-items: center;
}

.action-icon {
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
}

.action-icon svg {
  width: 20px;
  height: 20px;
  color: #999;
}
</style>
